<script lang="ts" setup>
import { getSvg } from "@/utils";
defineOptions({
  name: "ViewNumbers"
});
function handleClick() {
  console.log("click");
}
</script>
<template>
  <div
    @click="handleClick"
    class="h-220 shadow-[0px_4px_8px_0px_rgba(58,90,112,0.22)] rounded-10 bg-[url(@/assets/svg/Frame_493.svg)] bg-no-repeat bg-cover bg-center mb-15"
  >
    <div
      class="h-170 rounded-[10px_10px_0_0] pr-26 pt-49 flex flex-col justify-start items-end gap-y-10"
    >
      <div
        class="w-144 h-39 whitespace-nowrap font-normal text-32 color-[#fff] lh-38 text-center not-italic"
      >
        ดูหมายเลข
      </div>
      <div
        class="w-131 h-19 mr-6 whitespace-nowrap font-500 text-16 color-[#fff] lh-19 text-center not-italic"
      >
        ที่ถูกรางวัลย้อนหลัง
      </div>
      <div
        class="w-100 h-19 mr-16 whitespace-nowrap font-normal text-16 color-[#fff] lh-19 text-center not-italic"
      >
        <span>2558</span><span> ~ </span><span>2568</span>
      </div>
    </div>

    <div
      class="h-50 lh-50 bg-[rgba(0,0,0,0.43)] rounded-[0_0_10px_10px] px-20 flex justify-between items-center"
    >
      <span class="font-500 text-14 color-[#fff] lh-16 text-left not-italic"
        >คลิกเพื่อดูรายละเอียด</span
      >
      <img class="w-7 h-13 aspect-ratio-[7/13]" :src="getSvg('Frame_597')" />
    </div>
  </div>
</template>
